<!-- 
    只包含列表和分页以及是否显示多选框，以及单击行事件
    多选列：
     {
        type: 'selection',
        width: 40,
        align: 'center'
     },
    其它列定义：
    {
        title: 'Name',
        key: 'name'
    },
    操作列
     {
        title: 'Action',
        slot: 'action',
        width: 150,
        align: 'center'
    }

-->
<template>
    <div class="mcTableIndex">
        <div class="mcTableList">
            <Table
                :row-key="rowKey"
                :data="tableData"
                :columns="tableColumn"
                border
                style="width: 100%"
                ref="table"
                highlight-row
                :showChildren="true"
                @on-selection-change="selectionChange"
                @on-row-click="rowClick"
                :height="curHeight ? curHeight : 'calc(100vh - 200px)'"
            >
                <!-- 字段传的1或者0  启用禁用 -->
                <template #enable="{row}">
                    {{ row.enable == '1' ? '启用' : '禁用' }}
                </template>
                <template #isEnable="{row}">
                    {{ row.isEnable == '1' ? '启用' : '禁用' }}
                </template>
                <template #is_enable="{row}">
                    {{ row.is_enable == '1' ? '启用' : '禁用' }}
                </template>
                <template #IS_ENABLE="{row}">
                    {{ row.IS_ENABLE == '1' ? '启用' : '禁用' }}
                </template>

                <template #sex="{row}">
                    {{ row.gender == '1' ? '男' : '女' }}
                </template>
                <template #user_sex="{row}">
                    {{ row.user_sex == '1' ? '男' : '女' }}
                </template>

                <template #isApproval="{row}">
                    {{ row.isApproval == '1' ? '通过' : '不通过' }}
                </template>

                <template #IS_PUBLIC="{row}">
                    {{ row.IS_PUBLIC == '1' ? '是' : '否' }}
                </template>

                <!-- 账户状态（0：正常有效 1：被销户 2：被冻结 3：被合并） -->
                <template #AC_STATE="{row}">
                    {{ row.AC_STATE == '0' ? '正常有效' : row.AC_STATE == '1' ? '被销户' : row.AC_STATE == '2' ? '被冻结' : '被合并' }}
                </template>

                <template #bgnum="{row}">
                    <a v-if="row.bgnum != '0'" @click="lookBgNum(row)">查看</a>
                </template>

                <!-- 线损率 -->
                <template #loss="{row}">
                    {{ row.loss + ' %' }}
                </template>

                <!-- 机构性质 -->
                <template #orgType="{row}">
                    {{ getOrgType(row) }}
                </template>

                <!-- sfcg 是否成功 -->
                <template #sfcg="{row}">
                    {{ row.sfcg == '1' ? '成功' : '' }}
                </template>

                <!-- 设定模式 V7 -->
                <template #V7="{row}">
                    {{ getSetMode(row.V7) }}
                </template>

                <!-- 配发方案 -->
                <template #xffa="{row}">
                    <span v-if="row.xffa == '未配置'" style="color: red"> 未配置 </span>
                    <span v-else>
                        {{ row.xffa }}
                    </span>
                </template>

                <!-- 网络状态 wlzt -->
                <template #wlzt="{row}">
                    <span v-if="row.wlzt == '离线'" style="color: red"> 离线 </span>
                    <span v-else>
                        {{ row.wlzt }}
                    </span>
                </template>

                <!-- 是否在线 on_line -->
                <template #on_line="{row}">
                    <span v-if="row.on_line == '1'" style="color: red"> 离线 </span>
                    <span v-else> 在线 </span>
                </template>

                <!-- 开关机 V6 -->
                <template #V6="{row}">
                    <span v-if="row.V6 == '0'" style="color: red"> 关机 </span>
                    <span v-else> 开机 </span>
                </template>

                <!-- 自动控制 -->
                <template #zdkz="{row}">
                    <div style="display: flex" class="zdkz">
                        <div>
                            <el-checkbox disabled :checked="row.zdkz.indexOf('1') != -1" style="margin: 0; padding: 0">开机</el-checkbox>
                        </div>
                        <div>
                            <el-checkbox disabled :checked="row.zdkz.indexOf('2') != -1" style="margin-left: 0; padding: 0"
                                >关机</el-checkbox
                            >
                        </div>
                    </div>
                </template>

                <!-- 是否有效 sfyx -->
                <template #sfyx="{row}">
                    <el-checkbox disabled :checked="row.sfyx == '1'" style="margin: 0; padding: 0"></el-checkbox>
                </template>

                <template #action="{row, index}">
                    <el-button
                        v-if="tableBtn.includes('add') && getBtnShow('add')"
                        @click.native.prevent="addRow(index, row)"
                        type="text"
                        size="small"
                    >
                        新增
                    </el-button>
                    <el-button
                        v-if="tableBtn.includes('edit') && getBtnShow('edit')"
                        @click.native.prevent="editRow(index, row)"
                        type="text"
                        size="small"
                    >
                        编辑
                    </el-button>
                    <el-button
                        v-if="tableBtn.includes('view') && getBtnShow('view')"
                        @click.native.prevent="viewRow(index, row)"
                        type="text"
                        size="small"
                    >
                        详情
                    </el-button>
                    <el-button
                        v-if="tableBtn.includes('lookSMJ') && getBtnShow('lookSMJ')"
                        @click.native.prevent="lookSMJRow(index, row)"
                        type="text"
                        size="small"
                    >
                        预览
                    </el-button>
                    <el-button
                        v-if="tableBtn.includes('delete') && getBtnShow('delete')"
                        @click.native.prevent="deleteRow(index, row)"
                        type="text"
                        size="small"
                        style="color: red"
                    >
                        删除
                    </el-button>
                    <el-button
                        v-if="tableBtn.includes('download') && getBtnShow('download')"
                        @click.native.prevent="downloadRow(index, row)"
                        type="text"
                        size="small"
                    >
                        下载
                    </el-button>

                    <el-button
                        v-if="tableBtn.includes('resetPwd') && getBtnShow('resetPwd')"
                        @click.native.prevent="resetPwdRow(index, row)"
                        type="text"
                        size="small"
                    >
                        修改密码
                    </el-button>

                    <el-button
                        v-if="tableBtn.includes('relationMenu') && getBtnShow('relationMenu')"
                        @click.native.prevent="relationMenuRow(index, row)"
                        type="text"
                        size="small"
                    >
                        关联菜单
                    </el-button>

                    <el-button
                        v-if="tableBtn.includes('relationUser') && getBtnShow('relationUser')"
                        @click.native.prevent="relationUserRow(index, row)"
                        type="text"
                        size="small"
                    >
                        关联用户
                    </el-button>
                </template>
            </Table>
        </div>
        <div class="mcCommonPager" v-if="tableData && tableData.length > 0 && showPage">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="pageChange"
                :current-page="current"
                :page-sizes="[20, 40, 60, 80, 100]"
                :page-size="pageSize"
                layout="total,prev,pager,next,sizes"
                :total="count"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {PopupCommon} from '@/libs/popupCommon'
import {Utility} from '@/libs/utility'
import {getButtonPower} from '@/libs/tools'
// pageNo 当前第几页
// pageSize 每页条数
export default {
    props: {
        showPage: {
            type: Boolean,
            default: true
        },
        /** 数据源：这里不确定字段，只要是数组就可以 */
        dataSource: {
            /** 这里不确定字段，只要是数组就可以 */
            type: Array,
            required: true
        },
        /** 自定义列 */
        tableColumns: {
            /** 格式： [{title:"",key:"",slot:"",align:"",width:1}] */
            type: Array,
            required: true
        },
        /** 操作按钮集合 */
        btnList: {
            /** 格式：['edit','view','delete','lookSMJ'] ，可以给空 */
            type: Array
        },

        /** 一页显示多少条数据 */
        pageSize: {
            type: Number,
            require: true
        },
        /** 总共有多少条数据 */
        pageCount: {
            type: Number,
            require
        },
        /** 当前第几页 */
        pageNo: {
            type: Number,
            require
        },
        /** 是否展示一页显示多少条数据*/
        isSizes: {
            type: Boolean
        },
        height: {
            type: String | Number
        },
        // 主键
        rowKey: {
            type: String
        }
    },
    computed: {
        tableData() {
            return this.dataSource
        },
        tableColumn() {
            const columns = this.tableColumns
            columns.map((t) => {
                if (t.type == 'index') {
                    t.title = '序号'
                    t.width = 65
                }
                return t
            })
            return columns
        },
        tableBtn() {
            return this.btnList
        },
        size() {
            return this.pageSize
        },
        count() {
            return this.pageCount
        },
        current() {
            return this.pageNo
        },
        hasSelect() {
            return this.selection
        },
        hasIsSizes() {
            return this.isSizes
        },
        curHeight() {
            return this.height
        }
    },
    watch: {
        // 路由改变，头部标题改变。
        $route: {
            handler(v) {
                this.urlName = v.name
            },
            immediate: true
        }
    },
    data() {
        return {
            urlName: '',
            multipleSelection: [],
            currentRow: null,
            allOrgType: []
        }
    },
    methods: {
        getBtnShow(type) {
            return getButtonPower(this.urlName, type)
        },
        //  V7设定模式( 0：自动；1，制冷；2，除湿；3，送风；4，制热)
        getSetMode(v) {
            //  V7设定模式( 0：自动；1，制冷；2，除湿；3，送风；4，制热)
            switch (v) {
                case '0':
                    return '自动'
                case '1':
                    return '制冷'
                case '2':
                    return '除湿'
                case '3':
                    return '送风'
                case '4':
                    return '制热'
                default:
                    return '无动作'
            }
        },
        lookBgNum(item) {
            this.$emit('lookBgNum', item)
        },
        // 获取所有的机构性质
        getAllOrgType() {
            Utility.getDictListByTypeCode('ORG_TYPE').then((res) => {
                if (res && res.length > 0) {
                    const data = res.map((t) => {
                        return {
                            value: t.value,
                            label: t.desc
                        }
                    })
                    this.allOrgType = data
                }
            })
        },
        // 获取机构性质
        getOrgType(row) {
            console.log(this.allOrgType, row, 'row...........')
        },

        // 勾选
        selectionChange(selection) {
            this.$emit('handleSelectionChange', selection)
        },
        rowClick(row) {
            this.$emit('handleCurrentChange', row)
        },
        roleMenu(item) {
            this.$emit('roleMenu', item)
        },
        roleUser(item) {
            this.$emit('roleUser', item)
        },
        handleCurrentChange(val) {
            this.currentRow = val
            this.$emit('handleCurrentChange', val)
        },
        getClassName(name, value) {
            if (name == 'elementStatus') {
                if (value == '1') {
                    return 'elementFBZ'
                }
                if (value == '2') {
                    return 'elementYFB'
                }
                if (value == '3') {
                    return 'elementDFB'
                }
            }
            return name
        },
        retestShow(i, d) {
            return this.tableBtn.includes('retest') && !d[i].retestId
        },
        // 点击行勾选数据
        handleClickTableRow(row) {
            this.$refs.table.toggleRowSelection(row)
        },
        rowClass(row) {
            if (row.row.retestId) {
                return {
                    height: '40px',
                    'background-color': '#B0CAE5'
                }
            } else {
                return {
                    height: '40px'
                }
            }
        },
        // 将tooltip的值转成string类型，数字类型vue报js错误，虽然实际不影响。
        changeToString(value) {
            if (value) {
                return value.toString()
            } else {
                return ''
            }
        },
        handleSizeChange(e) {
            this.$emit('handleSizeChange', e)
        },
        getCheckValue(row, curColumnName, style) {
            let newValue = ''
            if (style == 'fontWeight') {
                newValue = 'normal'
            } else {
                newValue = '#606266'
            }
            if (row.autoCheckResult) {
                const autoCheckResult = JSON.parse(row.autoCheckResult)
                if (typeof autoCheckResult[curColumnName] != 'undefined' && autoCheckResult[curColumnName] == false) {
                    if (style == 'fontWeight') {
                        newValue = 'bold'
                    } else {
                        newValue = 'red'
                    }
                }
            }
            return newValue
        },
        getDictValue(dictType, dictValue) {
            let finishValue = dictValue
            const list = Utility.getDictList(dictType)
            if (list && list.length > 0 && typeof dictValue != 'undefined' && dictValue != null) {
                dictValue = dictValue.toString()
                if (dictValue.indexOf(',') != -1) {
                    dictValue = dictValue.split(',')
                    finishValue = list
                        .filter((t) => dictValue.includes(t.value))
                        .map((t) => t.label)
                        .join(',')
                } else {
                    const item = list.find((t) => t.value == dictValue)
                    if (typeof item != 'undefined') {
                        finishValue = item.label
                    }
                }
            }
            return finishValue
        },
        addRow(i, data) {
            this.$emit('addRow', data)
        },
        editRow(i, data) {
            if (typeof data.DIC_GUID == 'undefined') {
                data.DIC_GUID = '1'
            }
            this.$emit('editRow', data)
        },
        viewRow(i, data) {
            this.$emit('viewRow', data)
        },
        lookSMJRow(i, d) {
            const data = {
                index: i,
                data: d[i]
            }
            this.$emit('lookSMJRow', data)
        },
        deleteRow(i, d) {
            PopupCommon.confirm('此操作将删除该数据, 是否继续?')
                .then(() => {
                    this.$emit('deleteRow', d)
                })
                .catch(() => {
                    // 这里尽量写下，否则会报警告异常。
                    console.log('已取消删除')
                })
        },
        resetPwdRow(i, d) {
            this.$emit('resetPwdRow', d)
        },
        relationMenuRow(i, d) {
            this.$emit('relationMenuRow', d)
        },
        relationUserRow(i, d) {
            this.$emit('relationUserRow', d)
        },
        downloadRow(i, d) {
            console.log(i, d)
        },
        // 页码点击事件,p当前页
        pageChange(p) {
            console.log(p, this.current, this.pageNo)

            this.$emit('pageChange', p)
        },
        /** 改变选中行的值 */
        handleSelectionChange(val) {
            this.multipleSelection = val
            // this.$emit("handleSelectionChange", val)
        },
        /** 设置checkbox选中 */
        setCheckboxSelect(userList) {
            console.log(userList)
            //  this.$refs.table.toggleSelect(0)
        },
        setSingleCheckboxToggle(index) {
            this.$refs.table.toggleSelect(index)
        }
    },
    created() {
        this.getAllOrgType()
    },
    mounted() {},
    destroyed() {}
}
</script>

<style scoped>
.mcTableIndex {
    height: auto;
}

.mcTableIndex .mcTableList {
    /* 避免出现滚动条 */
    max-height: 100%;
    overflow: hidden;
}

.mcTableIndex .mcCommonPager {
    margin-top: 10px;
    background-color: #fff;
    padding: 5px 0;
    text-align: right;
}
.greenserviceStatus {
    color: green;
}
.redserviceStatus {
    color: red;
}
.zdkz {
    gap: 10px;
}
</style>
